<template>
  <dialog-info ref="refPopupDetailDialog">
    <!-- 标题 -->
    <template #DialogTitle>
      <span>{{ currentPopupData.stationNo }}</span>
    </template>
    <!-- 内容 -->
    <template #DialogContainer>
      <el-descriptions class="margin-top" :title="`cgi: ${currentPopupData.cgi}`" :column="3" border>
        <el-descriptions-item width="100">
          <template #label>
            <span class="cell-item"> 区县 </span>
          </template>
          <span>{{ currentPopupData.district }}</span>
        </el-descriptions-item>
        <el-descriptions-item width="100">
          <template #label>
            <span class="cell-item"> 投诉类别 </span>
          </template>
          <span>{{ currentPopupData.category }}</span>
        </el-descriptions-item>
        <el-descriptions-item width="100">
          <template #label>
            <span class="cell-item"> 投诉子类别 </span>
          </template>
          <span>{{ currentPopupData.subCategory }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 网格名称 </span>
          </template>
          <span>{{ currentPopupData.gridName }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 操作状态 </span>
          </template>
          <span>{{ currentPopupData.operatingState }}</span>
        </el-descriptions-item>
        <!-- <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 网格名称 </span>
          </template>
          <span>{{ currentPopupData.gridName }}</span>
        </el-descriptions-item> -->
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 品牌 </span>
          </template>
          <span>{{ currentPopupData.brand }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 用户归属 </span>
          </template>
          <span>{{ currentPopupData.userAttribution }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 用户星级 </span>
          </template>
          <span>{{ currentPopupData.userStar }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 分发时间 </span>
          </template>
          <span>{{ getFormulateDate(currentPopupData.dispatchTime) }}</span>
        </el-descriptions-item>
        <!-- <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 经纬度 </span>
          </template>
          <span>[{{ currentPopupData.longitude.toFixed(positionFix) }},
            {{ currentPopupData.latitude.toFixed(positionFix) }}]</span>
        </el-descriptions-item> -->
        <el-descriptions-item>
          <template #label>
            <span class="cell-item"> 服务类别 </span>
          </template>
          <span>{{ currentPopupData.serviceRequestCategory }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </template>
  </dialog-info>
</template>

<script setup>
import { ref } from "vue";
import { getFormulateDate } from "@/utils/index.js";
// import DetailDialog from "@/components/OpenlayerBaseMap/components/DetailDialog.vue";

const refPopupDetailDialog = ref(null);

// 当前气泡弹出框信息
const currentPopupData = ref({});
const positionFix = ref(3);

/**
 * 业务
 */
const show = (val) => {
  // console.log("show", val);
  refPopupDetailDialog.value.show();

  currentPopupData.value = val; // 基本信息数据
};

defineExpose({
  show,
});
</script>